<html>
<head>
  <script type="text/javascript" src="table_floating_header.js"></script>
  <script type="text/javascript">
    function appendRow(cellvalue1, cellvalue2) {
      var tbody = document.getElementById("tablebody");
      var row = document.createElement("tr");
      // add the two cells to the new row
      var cell = document.createElement("td");
      var cellText = document.createTextNode(cellvalue1);
      cell.appendChild(cellText);
      row.appendChild(cell);
      cell = document.createElement("td");
      cellText = document.createTextNode(cellvalue2);
      cell.appendChild(cellText);
      row.appendChild(cell);
      // add the new row to the table body
      tbody.appendChild(row);
    }
    function onSubmission() {
      var name = document.getElementById("nameinput").value;
      var home = document.getElementById("homeinput").value;
      if (name != "") {
        appendRow(name, home);
      } else {
        alert("Please enter some text");        
      }
    }
  </script>
  <style type="text/css">
    #table { width: 100%; font-size: 1em; }
  </style>
</head>
<body>
  <table>
    <thead id="thead"><tr><td><!-- this makes the form stick to the top of the page-->
      <input class="textinput" type="text" id="nameinput" value placeholder="Name"/>
      <input class="textinput" type="text" id="homeinput" value placeholder="Home" />
      <input type="submit" value="Submit" onclick="onSubmission()">
    </td></tr></thead>
    <tr><td>
    <table id="table"><tbody id="tablebody">
      <tr id="toptablerow">
        <td>Name</td>
        <td>Home</td>
      </tr>
    </tbody></table>
  </td></tr></table>
</body>
</html>